import getEchartLayer from './echartLayer.js';
import _chunk from 'lodash/chunk';

let cLyr;

function processData(pathsList, chunkNum = 1) {
  if (!pathsList.length) {
    return [];
  }
  let flatData = pathsList.reduce((r, paths) => {
    const chunks = [];
    for (let i = 1; i < paths.length; i += chunkNum) {
      const e = paths[i];
      if (!e) {
        return;
      }
      const chunkArr = paths.slice(i, i + chunkNum);
      chunkArr.color = paths.color || 'rgba(255,200,40,1)';
      if (paths[i - 1]) {
        chunkArr.unshift(paths[i - 1]);
      }
      if (paths[i + chunkNum + 1]) {
        chunkArr.push(paths[i + chunkNum + 1]);
      }
      chunks.push(chunkArr);
    }

    r.push(...chunks);
    // r.push(..._chunk(paths, chunkNum));
    return r;
  }, []);
  return flatData.map(subPaths => {
    return {
      coords: subPaths.map(([x, y]) => {
        return [x, y];
      }),
      color: subPaths.color,
      // lineStyle: {
      //   normal: {
      //     color: subPaths[0].color || 'rgba(255,200,40,1)',
      //     // color: 'rgba(90,221,223,1)',
      //   },
      // },
    };
  });
}

export function initEchartsLayer(pathsList) {
  var option = {
    title: {
      show: false,
    },
    series: [
      {
        name: '数据传输示意',
        type: 'lines',
        coordinateSystem: 'arcgis',
        polyline: true,
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.8,
          color: '#fff',
          symbolSize: 3,
        },
        lineStyle: {
          normal: {
            // color: '#a6c84c',
            width: 0,
            // curveness: 0.2,
          },
        },

        data: processData(pathsList),
      },
    ],
  };

  getEchartLayer().then(echartsLayer => {
    cLyr = new echartsLayer(window.agsGlobal.view, option);
    window.flowRenderLayer = cLyr;
  });
}

export function updateEchartsLayer(pathsList) {
  if (!cLyr) {
    console.warn('图层还未初始化');
  }
  const data = processData(pathsList);

  var option = {
    title: {
      show: false,
    },
    series: data.map(pathData => {
      return {
        name: '数据传输示意',
        type: 'lines',
        coordinateSystem: 'arcgis',
        zlevel: 1,
        effect: {
          show: true,
          period: 3,
          trailLength: 0.8,
          // color: '#fff',
          color: pathData.color,
          // color: 'rgba(255,200,40,1)',
          symbolSize: 3,
        },
        lineStyle: {
          normal: {
            // color: '#a6c84c',
            width: 0,
            // curveness: 0.2,
          },
        },

        data: [pathData],
      };
    }),
  };

  // console.log(JSON.stringify(data, null, 4));
  // console.log(JSON.stringify(pathsList, null, 4));
  // return;
  // console.log(JSON.stringify(option, null, 4));
  cLyr.setChartOption(option);
  cLyr.setVisible(true);
  // updateChart(option);
}

export function hideEchartsLayer() {
  cLyr.setVisible(false);
}

export function removeEchartsLayer() {
  cLyr.removeLayer();
}
